<template>
  <div class="filter-container">
    <div class="filter-item">
      <el-form ref="form" :model="form" label-width="80px" @submit.native.prevent>
        <el-form-item label="求职城市">
          <CitySelect @childByValue="setCity"></CitySelect>
        </el-form-item>

        <el-form-item label="性别" class="inline">
          <SexSelect @childByValue="setSex"></SexSelect>
        </el-form-item>

        <el-form-item label="工作经验" class="inline">
          <WorkExp @childByValue="setWorkExp"></WorkExp>
        </el-form-item>

        <el-form-item label="学历" class="inline">
          <Education @childByValue="setEducation"></Education>
        </el-form-item>

        <el-form-item label="薪资要求" class="inline">
          <el-select v-model="form.salary" placeholder="请选择" :clearable="true">
            <el-option
              v-for="item in salaryList"
              :key="item.value"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="求职状态" class="inline">
          <el-select v-model="form.jobstatus" placeholder="请选择" :clearable="true">
            <el-option
              v-for="item in jobstatusList"
              :key="item.value"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="职位类别" class="inline">
          <el-cascader
            :clearable="true"
            :options="postTypeList"
            placeholder="请选择"
            v-model="form.postType"
            change-on-select
            :props="props">
          </el-cascader>
        </el-form-item>

        <el-form-item label="更新时间" class="inline">
          <el-select v-model="form.updateTimeType" placeholder="请选择">
            <el-option
              v-for="item in updateTimeTypeData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      <el-form-item class="inline">
        <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>


      </el-form>
    </div>
  </div>
</template>

<script>
  import CitySelect from '@/components/CitySelect/'
  import SexSelect from '@/components/SexSelect/'
  import WorkExp from '@/components/WorkExp/'
  import Education from '@/components/Education/'

  import {fetchList, fetchTreeList} from "../../../../api/web/dictionary";

  export default {
    components: {CitySelect, SexSelect, WorkExp, Education},
    name: "Index",
    data() {
      return {
        form: {
          areaCode: [],
          sexId: '',
          workexperience: '',
          education: '',
          salary: '',
          jobstatus: '',
          postType: [],
          updateTimeType: 'no_limit'
        },
        workexperienceList: [],
        educationList: [],
        salaryList: [],
        jobstatusList: [],
        options2: [{
          label: '江苏',
          cities: []
        }, {
          label: '浙江',
          cities: []
        }],
        props: {
          label: 'name',
          value: 'id',
          children: 'children'
        },
        postTypeList: [],
        value: '',
        updateTimeTypeData: [{
          value: 'no_limit',
          label: '不限'
        }, {
          value: 'day1',
          label: '最近1天'
        }, {
          value: 'day3',
          label: '最近3天'
        }, {
          value: 'day7',
          label: '最近一周'
        }, {
          value: 'month1',
          label: '最近一个月'
        }, {
          value: 'month3 ',
          label: '最近三个月'
        }]
      }
    },
    methods: {
      setCity(val) {
        this.form.areaCode = val
      }, 
      setSex(val) {
        this.form.sexId = val
      }, 
      setWorkExp(val) {
        this.form.workexperience = val
      }, 
      setEducation(val) {
        console.log(val)
        this.form.education = val
      },
      query(){
        this.$emit('query', this.form)
      }
    },
    created() {
      if (this.$route.query.post_type) {
        this.form.postType[0] = this.$route.query.post_type
      }
      fetchList('salary').then(res => {
        this.salaryList = res.data
      }).catch(err => {
        console.log(err)
      })

      fetchList('jobstatus').then(res => {
        this.jobstatusList = res.data
      }).catch(err => {
        console.log(err)
      })
      fetchTreeList('posttype').then(res => {
        this.postTypeList = res.data
      }).catch(err => {
        console.log(err)
      })
    }
  }
</script>

<style scoped>
  .el-form-item.inline {
    display: inline-block;
  }
</style>
